<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="fullName1='Liu XiaoXiao'">changeSet</button>
      <button @click="firstName = 'Xu'">change</button>
      <!-- 
        计算属性可以按照属性的方式直接使用,不需要调用
        多次使用计算属性,只会在第一次使用的时候计算一次,然后把计算的结果缓存下来,随时可以取用
        只有在当前计算属性所依赖的数据发生变化以后,计算属性才会重新计算

       -->
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <h2>全名是{{fullName}}</h2>
      <hr/>
      <h2>全名是{{fullName1}}</h2>
      <h2>全名是{{fullName1}}</h2>
      <h2>全名是{{fullName1}}</h2>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "Wang",
            lastName: "zhongwang",
          };
        },
        computed: {
            fullName() {
                console.log('change');
                return this.firstName + ' ' + this.lastName;
            },
            fullName1: {
                
                get() {
                    console.log('change1');
                    return this.firstName + ' ' + this.lastName;
                },
                set(val) {
                    this.firstName = val.split(' ')[0];
                    this.lastName = val.split(' ')[1];
                }
            },
        }
      });
    </script>
  </body>
</html>
